<template>
  <div>
    <div id="query">
      <el-header class="el-header">
        {{msg1}}
      </el-header>
    </div>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="姓名" value="1"></el-option>
          <el-option label="ID" value="2"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="Query"></el-button>
      </el-input>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="userId"
          label="ID"
          width="180">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEdit">{{scope.row.userId}}</span>
            <el-input v-if="scope.row.isEdit" v-model="scope.row.userId"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
          <template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.name}}</span>
            <el-input v-if="scope.row.isEdit" v-model="scope.row.name"></el-input></template>
        </el-table-column>
        <el-table-column
          prop="deptId"
          label="科室编号"
          width="180">
          <template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.deptId}}</span>
            <el-input v-if="scope.row.isEdit" v-model="scope.row.deptId"></el-input></template>
        </el-table-column>
        <el-table-column
          prop="userType"
          label="用户类型"
          width="180">
          <template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.userType}}</span>
            <el-input v-if="scope.row.isEdit" v-model="scope.row.userType"></el-input></template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="头衔"
          width="180">
          <template slot-scope="scope"><span v-if="!scope.row.isEdit">{{scope.row.title}}</span>
            <el-input v-if="scope.row.isEdit" v-model="scope.row.title"></el-input></template>
        </el-table-column>
        <el-table-column
        prop="function"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.isEdit" type="warning "@click="Change(scope.$index,scope.row)">修改</el-button>
          <el-button v-if="scope.row.isEdit" type="success "@click="CompleteChange(scope.$index,scope.row)">修改完成</el-button>
          <el-button type="primary "@click="Delete(scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <div>
      <el-row>
        <el-button type="danger"  round @click="dialogFormVisible = true">添加用户</el-button>

        <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="ID" :label-width="formLabelWidth">
              <el-input v-model="form.userId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="科室编号" :label-width="formLabelWidth">
              <el-input v-model="form.deptId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户类型" :label-width="formLabelWidth">
              <el-select v-model="form.userType" placeholder="请选择">
                <el-option label="用户管理员" value='admin'></el-option>
                <el-option label="医技医生" value='yiji'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否是医生" :label-width="formLabelWidth">
              <el-select v-model="form.isDoc" placeholder="请选择">
                <el-option label="是" value=1></el-option>
                <el-option label="不是" value=0></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="isSchedul" :label-width="formLabelWidth">
              <el-select v-model="form.isSchedul" placeholder="请选择">
                <el-option label="是" value=1></el-option>
                <el-option label="不是" value=0></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="头衔" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary "@click="Add">确 定</el-button>
          </div>
        </el-dialog>
      </el-row>
    </div>
  </div>
</template>



<style>
  .el-header{
    text-align: left;
    font-size: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background-color: lightskyblue;
  }
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
  import axios from 'axios';
  export default {
    data() {
      return {
        isEdit:false,//编辑
        msg1: '用户管理',
        input:'',
        select:'',
        tableData: [{
        }],
        dialogFormVisible: false,
        form: {
          userId:'',
          password: '',
          name: '',
          deptId: '',
          userType: '',
          isDoc: null,
          isSchedul: null,
          title: '',
        },
        formLabelWidth: '120px'
      }
    },
    mounted:function(){
       this.axios.get('/api/user/allUser')
        .then(res=>{
          this.tableData=res.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    methods:{
      Query() {
        this.axios.get('/api/user/allUser')
          .then(res=> {
            if(this.select=='') {
              this.$message({
                showClose: true,
                type: "false",
                message: "请选择查询方式"
              });
            }
            else if (this.select == 2) {
              this.tableData = [];
              for (var i = 0; i < res.data.length; i++) {
                if (this.input == res.data[i].userId) {
                  this.tableData.push(res.data[i]);
                }
                if (this.input == '') {
                  this.tableData = res.data;
                }
              }
            }
            else if (this.select == 1) {
              this.tableData = [];
              for (var i = 0; i < res.data.length; i++) {
                if (this.input == res.data[i].name) {
                  this.tableData.push(res.data[i]);
                }
                if (this.input == '') {
                  this.tableData = res.data;
                }
              }
            }
          })
        }, //query end
      Add(){
        this.dialogFormVisible = false;
        let data = JSON.stringify({
          userId:this.form.userId,
          password: this.form.password,
          name: this.form.name,
          deptId: this.form.deptId,
          userType: this.form.userType,
          isDoc: this.form.isDoc,
          isSchedul:this.form.isSchedul,
          title: this.form.title
        });
        console.log(this.form);
        console.log(data);
        this.axios.post('/api/user/insert',data,{
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        })
          .then(res=>{})
          .catch(function(error){
            console.log(error);
          });
        this.$router.go(0);
      },//Add end
      Delete(userId){this.axios.get('/api/user/delete',{
        params: {
          userId: userId
        }
      }).then(res=>{
        if(res.data==1){
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功"
          });
        }else{
          this.$message({
            showClose: true,
            type: "false",
            message: "删除失败"
          });
        }
        this.$router.go(0);
      });
      },//delete end
      Change(index,row){
        this.$set(row, 'isEdit', true);
      },//change end
      CompleteChange(index,row){
        this.$set(row, 'isEdit', false);
        console.log(this.tableData);
        let data = JSON.stringify({
          userId:this.tableData[index].userId,
          password: this.tableData[index].password,
          name: this.tableData[index].name,
          deptId: this.tableData[index].deptId,
          userType: this.tableData[index].userType,
          isDoc: this.tableData[index].isDoc,
          isSchedul:this.tableData[index].isSchedul,
          title: this.tableData[index].title
        });
        console.log(data);
        this.axios.post('/api/user/change',data,{
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(res=>{
          if(res.data==1){
            this.$message({
              showClose: true,
              type: "success",
              message: "修改成功"
            });
          }else{
            this.$message({
              showClose: true,
              type: "false",
              message: "修改失败"
            });
          }
        })
          .catch(function(error){
            console.log(error);
          });
      }//change end

      }//method end

  }
</script>
